<template>
  <div class="memo-container">
    <div class="memo">
      <div class="mark"></div>
      <div class="memo-heading">
        <h5 class="title">{{memo.title}}</h5>
        <ul class="tools">
          <li class="edit" @click="edit"></li>
          <li class="delete" @click="remove"></li>
        </ul>
      </div>
      <h6 class="memo-info">
        <span class="timeStamp">{{memo.createTime}}</span>
        <span class="category">分类: {{ $store.state.aHelper.getCateName(memo.categoryId) }}</span>
      </h6>
      <div class="content">
        <div class="text">{{memo.content}}</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import { Component , Prop, Vue } from "vue-property-decorator";
  import ItemData from "@/model/ItemData";
  @Component
  export default class MemoItem extends Vue{
    @Prop() memo!: ItemData;
    remove(): void {
      if(!window.confirm('确定要删除这个笔记吗')) return
      this.$store.state.aHelper.remove(this.memo.id)
    }
    // 编辑笔记，将当前笔记复制一份，传给vuex中的transterData桥梁，调用vuex中的方法，给transterData赋值
    edit() {
      let editData = JSON.parse(JSON.stringify(this.memo))
      this.$store.commit('showEditMemo',editData)
    }
  }
</script>